<template>
  <section id="article" class="main" :style="defaultHeight">
    <el-carousel :interval="5000" arrow="always" height="3.186667rem"  class="carousel center-content">
      <el-carousel-item v-for="(back, index) in backgroundDiv" :key="'banner'+index">
        <h3 class="carousel-item"  @click="toArticleDetailLink(bannerList[index].imgDetail,bannerList[index].isUrl)"  :style="back"></h3>
      </el-carousel-item>
    </el-carousel>
    <section class="container center-content" v-if="detail">
      <section class="article-list-nav margin-top-20">
        <div class="font20 nav-left"><label class="orange">首页</label>&nbsp;&nbsp;&gt;&nbsp;&nbsp;{{parentCategory.name}}</div>
        <ul class="nav-right">
          <li v-for="(ca,index) in categoryList" :key="'categoryList'+index" :class="ca.id == curentCaId ? 'active': ''" @click.stop="_getArticleList(ca.id)">
            {{ca.name}}
          </li>
        </ul>
      </section>

      <div class="main-content">
        <section class="content">
          <h1 class="article-title">{{detail.title}}</h1>

          <div class="article-info">
            <span class="article-category">{{detail.category.name}}</span>
            <span class="article-tag">{{detail.tag}}</span>
            <span class="article-browse">阅读：{{detail.browser}}次</span>
            <span class="article-author">{{detail.author}}</span>
            <span class="article-author">{{detail.createdAt}}</span>
          </div>

          <div class="article-abstract">
            {{detail.introduction}}
          </div>

          <div class="article-detail" id="article-detail">
            <mavon-editor
              style="height: 100%; font-size: 14px; line-height: 30px; color: rgb(73,73,73); text-indent:30px;"
              :ishljs="true"
              codeStyle="vs2015"
              v-model="detail.content"
              :defaultOpen="'preview'"
              :editable="false"
              :subfield="false"
              :toolbarsFlag="false">
            </mavon-editor>
          </div>

          <section class="article-comments">
            <h1 class="comments-title">评论：</h1>
            <article class="comments-inner">
              <div class="user-info">
                <p class="user-info-item">
                  <label for="username">姓名：</label>
                  <input type="text" id="username" placeholder="姓名">
                </p>
                <p class="user-info-item">
                  <label for="email">邮箱：</label>
                  <input type="email" id="email" placeholder="邮箱">
                </p>
              </div>
              <div class="comments-content">
                <p class="comments-content-title">评论内容：</p>
                <textarea name="comments" id="comments" cols="30" rows="10" placeholder="评论内容.."></textarea>
              </div>
              <button class="submit-comments">提交评论</button>
            </article>
          </section>

        </section>

        <article class="sidebar"> <!-- sidebarClass -->
          <div class="recommend">
            <h1 class="recommend-title">
              相关推荐
              <img src="../../assets/recommend8.png" alt="recommend">
            </h1>
            <ul class="recommend-inner" v-if="recommend.length > 0">
              <li class="recommend-item">
                <h1 v-for="(item, index) in recommend.slice(0, 5)" @click="_getArticleDetail(item.id)" :key="index">
                  {{item.title}}
                </h1>
              </li>
            </ul>
            <ul class="recommend-empty" v-else>暂无推荐</ul>
          </div>
        </article>
      </div>
    </section>
  </section>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import events from '../../libs/events'

  export default {
    components: {},
    data() {
      return {
        // 是否侧边栏
        sidebarFixed: false,
        // 文章ID
        id: this.$route.params.id,
        // 文章详情
        detail: null,
        // 推荐列表
        recommend: [],
        categoryId:this.$route.query.categoryId,
        parentCategory:{},
        curentCaId:this.$route.query.curentCaId,
        backgroundDiv:[],
        defaultHeight:{},
        categoryList:[],
        contentW:0,
        bannerList:[]
      }
    },
    computed: {
      // 内容样式
      contentClass() {
        return this.sidebarFixed ? 'content margin-right-300' : 'content'
      },
      // 侧边栏样式
      sidebarClass() {
        return this.sidebarFixed ? 'sidebar sidebar-fixed' : 'sidebar'
      }
    },
    created() {
      this._getArticleDetail(this.id);
      if(this.categoryId){
        this._getCurrentCategory(this.categoryId);
        this._getCategoryList(this.categoryId);
      }

      this._getIndexDetail();
    },
    mounted() {
      // 监听滚动条
      window.addEventListener('scroll', this.handleScroll)
      this.defaultHeight = {minHeight: (document.body.clientHeight - document.getElementsByClassName('header-wrap')[0].clientHeight - document.getElementsByClassName('Footer-wrap')[0].clientHeight) + 'px'}
    },
    destroyed() {
      // 移除滚动条
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
      ...mapActions({
        getArticleDetail: 'article/getArticleDetail',
        getCategoryArticle: 'category/getCategoryArticle',
        getIndexDetail: 'index/indexDetail',
        getCategoryList: 'category/getCategoryList',
      }),
      // 获取分类
      async _getCurrentCategory(curCategoryId) {
        const ret = await this.getCategoryList({
          id:curCategoryId,
          isLoading: false
        });
        this.parentCategory = ret.data.data[0];
      },
      async _getCategoryList(parent_id) {
        const ret = await this.getCategoryList({
          parent_id,
          isLoading: false
        });
        this.categoryList = ret.data.data;
        this.curentCaId = this.curentCaId || this.categoryList.length && this.categoryList[0].id
      },

      async _getIndexDetail(){
        let ret = await this.getIndexDetail();
        events.$emit('setLogo',ret.logo);
        this.bannerList = this.checkImgLink(ret.banner1.split('|'))
        this.backgroundDiv = this.bannerList.map(item => {
          return {background: 'url(' + item.img + ') no-repeat center / cover'}
        })
      },

      checkImgLink(list){
        return list.map(item => {
          let itemInfo = item.split('@')
          return {img: itemInfo[0], imgDetail: itemInfo[1],isUrl:itemInfo[2]}
        })
      },

      _getArticleList (id){
        this.$router.push({path:'/article/list/'+this.categoryId,query: {curentCaId:id}});
      },

      toArticleDetailLink(id,isUrl) {
        if(!id) return;
        if(isUrl == 1){
          window.open(id,'_blank')
        }else{
          this.$router.push({path:'/article/detail/'+id,query: {categoryId:this.categoryId,curentCaId:this.curentCaId}});
        }
      },

      // 获取文章详情
      async _getArticleDetail(id) {
        // this.detail = null
        let ret = await this.getArticleDetail(id);
        this.detail = ret.data.data;

        this.curentCaId = this.detail.category.id
        //  如果没有传文章的分类ID过来 则通过文章去查找
        if(!this.categoryId){
          const ret1 = await this.getCategoryList({
            id:this.detail.category.id,
            isLoading: false
          });

          this.categoryId = ret1.data.data[0].parent_id
          this._getCurrentCategory(this.categoryId)
          this._getCategoryList(this.categoryId)
        }

        events.$emit('setNav',this.categoryId);
        // 获取分类列表
        this._getCategoryArticle({
          id: this.detail.category.id,
          isLoading: false
        });
      },
      // 分类下取文章
      async _getCategoryArticle(id) {
        let res = await this.getCategoryArticle(id);

        let arr = []
        res.data.data.forEach(item => {
          arr = item.articles.map(children => {
            return children;
          })
        })

        this.recommend = arr.filter(item => {
          return !item.is_del
        });
      },
      // 处理滚动条
      handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let offsetTop = document.querySelector('#article-detail').offsetTop;
        this.sidebarFixed = !!(scrollTop > offsetTop)
      }
    }
  }
</script>


<style lang="scss" scoped>
  $main-width:90%;
  $main-width-4-big-screen: 70%;
  $main-color: #e73e05;

  .carousel-item{
    height: 100%;
  }

  .center-content{
    margin: auto;
    width: $main-width;

    @media (min-width: 1500px) {
      width: $main-width-4-big-screen;
    }
  }

  .bold{
    font-weight: bold;
  }

  .orange{
    color: $main-color;
  }

  .black{
    color: #000;
  }

  .grey{
    color: #908d8d;
  }

  .font24{
    font-size: 24px;
  }

  .font20{
    font-size: 20px;
  }

  .font16{
    font-size: 16px;
  }

  .font14{
    font-size: 14px;
  }

  .font28{
    font-size: 28px;
  }

  .margin-top-10{
    margin-top: 10px;
  }

  .margin-top-20{
    margin-top: 20px;
  }

  .container {
    position: relative;
    margin: 0 auto;
    padding: 32px;
    background: #fff;
	  padding-bottom:50px;
    box-sizing: border-box;
    margin-top: 20px;

    & .article-list-nav{
      overflow: hidden;
      zoom: 1;
      padding-bottom: 20px;

      & .nav-left{
        float: left;
      }

      & .nav-right{
        float: right;

        & li{
          display: inline-block;
          border: 1px solid $main-color;
          color: $main-color;
          padding: 10px 20px;
          border-radius: 10px;
          margin-left: 16px;
          cursor: pointer;

          &:hover,&.active{
            background: $main-color;
            color: #fff;
          }
        }
      }
    }

    & .main-content{
      overflow: hidden;
      zoom: 1;
      margin-top: 40px;
    }

    & .content {
      position: relative;
      float: left;
      width: calc(100% - 360px);
      animation: contentAnimation 0.36s 0.18s ease both;

      & .article-title {
        font-size: 38px;
        color: #464c5b;
      }

      .article-info {
        width: 100%;
        margin: 32px 0;

        & span {
          display: inline-block;
          margin-right: 10px;
          font-size: 16px;
          color: #9ea7b4;
        }

        & span.article-category,
        & span.article-tag {
          background: #e8eaec;
          padding: 2px 16px;
          border-radius: 4px;
          background: rgba(51, 119, 255, .1);
        }
      }

      & .article-abstract{
        padding: 20px 10px;
        white-space: normal;
        color: #999999;
        overflow: visible;
        font-size: 14px;
        line-height: 34px;
        text-align: left;
        vertical-align: top;
        word-break: break-all;

        border: 1px solid rgba(228,228,228,1);
        background-color: rgba(252,251,253,1);
        word-wrap: break-word;
        word-break: break-all;
        text-align: left;
        margin-bottom: 30px;
      }

      & .article-detail .v-note-panel .v-note-show .v-show-content p{
        font-size: 20px;
        color: #657180;
        line-height: 48px;
      }
    }

    @keyframes contentAnimation {
      0% {
        opacity: 0;
        top: 64px;
        filter: alpha(opacity=0);
      }

      25% {
        opacity: 0.25;
        filter: alpha(opacity=25);
      }
      50% {
        opacity: 0.5;
        filter: alpha(opacity=50);
      }
      75% {
        opacity: 0.75;
        filter: alpha(opacity=75);
      }

      100% {
        opacity: 1;
        filter: alpha(opacity=100);
        top: 0;
      }
    }

    & .margin-right-300 {
      margin-right: 316px;
    }

    & .sidebar {
      box-sizing: border-box;
      width: 300px;
      padding-left: 20px;
      border-left: 1px solid #aaa;
      float: right;
      animation: rightAnimation 0.36s 0.18s ease both;

      & .recommend {

        & .recommend-title {
          font-size: 24px;
          padding-bottom: 16px;
          color: #464c5b;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #e8eaec;

          & img {
            width: 24px;
          }
        }

        & .recommend-item {
          & h1 {
            cursor: pointer;
            padding: 0;
            margin: 16px 0;
            font-size: 18px;
            color: #464c5b;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:hover {
              color: #3399ff;
              text-decoration: underline;
            }
          }
        }
      }
    }

    & .sidebar-fixed {
      position: fixed;
      margin-left: calc(100% - 360px);
      top: 128px;
    }

    @keyframes rightAnimation {
      0% {
        opacity: 0;
        filter: alpha(opacity=0);
      }

      25% {
        opacity: 0.25;
      }
      50% {
        opacity: 0.5;
        filter: alpha(opacity=50);
      }
      75% {
        opacity: 0.75;
        filter: alpha(opacity=75);
      }

      100% {
        opacity: 1;
        filter: alpha(opacity=100);
      }
    }
  }

  .article-comments {
    display: none;
    margin: 32px 0 16px;
    border-top: 1px solid #e8eaec;

    & .comments-title {
      padding: 16px 0;
      color: #2d8cf0;
      font-size: 32px;
    }

    & .comments-inner {
      padding-left: 16px;
    }

    & .recommend-empty {
      text-align: center;
      padding: 32px 0;
      font-size: 16px;
      color: #989898;
    }

    & .user-info {
      padding-bottom: 16px;

      & .user-info-item {
        font-size: 18px;
        margin-bottom: 16px;
        color: #464c5b;

        &:last-child {
          margin-bottom: 0;
        }

        & label {
          font-weight: 800;
        }

        & input {
          width: 375px;
          font-size: 18px;
          padding: 5px 10px;
          border-radius: 4px;
          border: 1px solid #dcdee2;
        }
      }
    }

    & .comments-content {
      & .comments-content-title {
        padding-bottom: 16px;
        font-size: 18px;
        color: #464c5b;
        font-weight: 800;
      }

      & textarea {
        width: 600px;
        font-size: 18px;
        padding: 5px 10px;
        border-radius: 4px;
        border: 1px solid #dcdee2;
      }
    }

    & .submit-comments {
      cursor: pointer;
      padding: 10px 20px;
      border: none;
      color: #fff;
      border-radius: 4px;
      margin-top: 16px;
      font-size: 18px;
      background-image: linear-gradient(to right, #5cadff 0, #2d8cf0 100%);
      background-repeat: repeat-x;

      &:hover {
        background-image: linear-gradient(to right, #2d8cf0 0, #2b85e4 100%);
        background-repeat: repeat-x;
      }
    }
  }

  @media screen and (min-width: 200px) and (max-width: 750px) {
    .container {
      position: relative;
      display: flex;
      flex-direction: column;
      max-width: 1264px;
      margin: 0 auto;
      background: #fff;

      & .content {
        margin-right: 0;
      }

      & .sidebar-fixed {
        position: relative !important;
        margin-left: 0 !important;
        top: 0 !important;
      }

      & .sidebar {
        display: none;
      }
    }
  }

</style>
<style>
  .v-note-wrapper .v-note-panel {
    box-shadow: none !important;
  }

  .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
    background: #fff !important;
  }

  .v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper .content-input-wrapper {
    padding: 0 !important;
  }

  .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
    padding: 0 !important;
  }
</style>

